disintegrate.init();

document.getElementById("img").addEventListener("click", (e) => {
  const disObj = disintegrate.getDisObj(e.target);
  disintegrate.createSimultaneousParticles(disObj);
  e.target.remove();
});

const ThanosSnap = function () {
  this.name = "ThanosSnap";
  this.anumationDuration = 1500; // 定义粒子动画持续时间（单位：毫秒）
  this.size = 3;
  this.speedX = Math.random();
  this.speedY = Math.random() * -1; // 让粒子向上移动
  this.first = true;

  /**
   * 实现自定义每个粒子的绘制
   * @param {*} ctx 画布的上下文
   * @param {*} percentComplete 例子动画完成的进度（让我们知道例子动画进行到哪里）
   */
  this.draw = (ctx, percentComplete) => {
    // 修改例子的初始位置，这样粒子的位置会比较零散，视觉效果会比较好
    if (this.first) {
      this.startX += (Math.random() - 0.5) * 10;
      this.startY += (Math.random() - 0.5) * 10;
      this.first = false;
    }

    ctx.beginPath();
    ctx.fillRect(
      this.startX - this.size / 2,
      this.startY - this.size / 2,
      this.size,
      this.size
    );

    // rgbaArray是disintegrate自带的对象
    const r = this.rgbArray[0];
    const g = this.rgbArray[1];
    const b = this.rgbArray[2];
    const a = 1 - percentComplete; //

    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
    ctx.fill();

    // 增加例子的运动速度
    this.speedX *= 1.07;
    this.speedY *= 1.07;

    // 让粒子缩小
    this.size *= 0.95;

    // 让粒子随着动画进行不断移动位置
    this.startX += this.speedX;
    this.startY += this.speedY;
  };
};

disintegrate.addParticleType(ThanosSnap);
